<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script type="text/javascript" src="../js/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="../js/popper.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <title>Chat Example</title>

</head>
<body>

<div class="container mt-5">
    <div class="row">
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    在线人员
                </div>
                <input type="hidden" id="hide">
                <div class="card-body" id="onlineUsers">
                    <ul >张三</ul>
                    <ul>李四</ul>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header" id="chatMan">
                    聊天室
                </div>
                <div class="card-body" id="chat-box">

                </div>
                <div class="card-footer">
                    <div class="input-group">
                        <input type="text" id="message-input" class="form-control" placeholder="Type your message...">
                        <div class="input-group-append">
                            <button class="btn btn-primary" onclick="sendMessage()">Send</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" th:inline="javascript">
    $(function (){
        $("#onlineUsers").on("click","ul",function (){
            $("#hide").val(this.id);
            $("#chatMan").html("正在和"+this.id+"聊天.....");
        });

    });

    var socket = new WebSocket("ws://localhost:8080/chat");

    // 连接成功时触发
    socket.onopen = function(event) {
        console.log("浏览器连接成功.....");
    };

    // 接收到消息时触发
    socket.onmessage = function(event) {
        let message = JSON.parse(event.data);
        console.log(message);
        console.log(message.to);
        if(message.userSet==null){
            displayMessage(message.from,message.text);
        }else{
            console.log("这是一条广播...");
            let name = [[${session.userName}]];
            var lis = "<ul id='all'>群聊</ul>"
            message.userSet.forEach(function (user,index){
                if (name!==user){
                    lis+= "<ul id=\""+user+"\">"+user+"</ul>";
                }
            })
            $("#onlineUsers").html(lis);
        }

    };

    // 连接关闭时触发
    socket.onclose = function(event) {
        console.log("浏览器断开连接.....");
    };

    function sendMessage() {
        const messageInput = document.getElementById('message-input');
        const text = messageInput.value;

        if (text.trim() !== '') {

            displayMessage('You', text);
            let name = [[${session.userName}]];
            let to = $("#hide").val();
            console.log(to)
            let message = {
                "from": name,
                "to": to,
                "text": text,
                "userSet": null
            };

            socket.send(JSON.stringify(message));

            messageInput.value = '';
        }
    }


    function displayMessage(sender, message) {
        const chatBox = document.getElementById('chat-box');
        const messageElement = document.createElement('div');

        // 根据发送者添加不同的样式
        if (sender === 'You') {
            messageElement.classList.add('text-right', 'text-primary');
        } else {
            messageElement.classList.add('text-left', 'text-success');
        }

        messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
        chatBox.appendChild(messageElement);
    }


    // socket.addEventListener('message', function (event) {
    //     const message = event.data;
    //     displayMessage('Friend', message);
    // });
</script>

</body>
</html>
